<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition 过渡动画</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      h2 {
        margin: 20px 0;
      }

      .box1 {
        width: 800px;
        height: 450px;
        position: relative;
      }

      .box1 img {
        width: 800px;
        height: 450px;
        object-fit: cover;
      }

      .box1::after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        content: "";
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 1s;
      }

      .box1:hover::after {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .box2 {
        width: 800px;
        height: 450px;
        position: relative;

        overflow: hidden;
      }

      .box2 img {
        width: 800px;
        height: 450px;
        object-fit: cover;
      }

      .box2 p {
        position: absolute;
        left: 0px;
        bottom: -35px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        transition: bottom 0.5s;
      }

      .box2:hover p {
        bottom: 0px;
      }

      .siderbar {
        width: 5px;
        /* height: 100%; */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #666;
      }

      .siderbar ul {
        right: 5px;
        width: 50px;
        top: 50%;
        position: absolute;
        /* 元素向上移动自身高度的一半 */
        transform: translateY(-50%);
      }

      .siderbar ul li {
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-bottom: 1px;
        background-color: #666;
        position: relative;
        text-align: center;
      }

      .siderbar ul li span.iconfont {
        font-size: 20px;
        color: #fff;
      }

      .siderbar ul li p {
        width: 0px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 50px;
        color: #fff;
        transition: width 0.5s;
        z-index: -1;
        /* 强制不换行，处理抖动问题 */
        white-space: nowrap;
        /* 隐藏溢出 */
        overflow: hidden;
        background-color: red;
      }

      .siderbar ul li:hover {
        background-color: red;
        cursor: pointer;
      }

      .siderbar ul li:hover p {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <h2>鼠标滑动，背景从透明到半透明效果</h2>
    <div class="box1">
      <img src="./images/01.jpg" alt="image" />
    </div>

    <h2>鼠标滑动，背景从透明到半透明效果</h2>
    <div class="box2">
      <img src="./images/01.jpg" alt="image" />
      <p>普莉姆萝赛·艾捷尔亚特</p>
    </div>

    <div class="siderbar">
      <ul>
        <li>
          <span class="iconfont icon-kefu"></span>
          <p>联系客服</p>
        </li>
        <li>
          <span class="iconfont icon-geren"></span>
          <p>京东会员</p>
        </li>
        <li>
          <span class="iconfont icon-gouwuche"></span>
          <p>购物车</p>
        </li>
        <li>
          <span class="iconfont icon-youhuiquan"></span>
          <p>优惠券</p>
        </li>
      </ul>
    </div>
  </body>
</html>
